<template>
	<div class="page-container">
		<el-dialog :title="myParam.title" width="90%" :visible.sync="coreStockDetailViewVisible"
			:close-on-click-modal="false" :before-close="handleClose" @opened="findPage(1)">
			<div class="gk-layout-container">
				<div class="gk-layout-header">
					<!--工具栏-->
					<s-query perms="core:coreStock" @click="findPage">
						<el-form-item>
							<el-select v-model="filters.classTypes" placeholder="物料分类" auto-complete="off"
								style="width: 200px;" clearable filterable>
								<el-option v-for="item in classTypes" :key="item.Id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					  
						<el-form-item>
							<el-select v-model="filters.pkId" placeholder="" auto-complete="off" style="width: 100px"
								clearable filterable>
								<el-option label="当前" :value="myParam.pkId"> </el-option>
								<el-option label="未选" :value="-myParam.pkId"> </el-option>

							</el-select>
						</el-form-item>
					 
						<el-form-item>
							<el-input v-model="filters.boxCode" placeholder="托盘码" />
						</el-form-item>
						  <s-dict placeholder="排序" name="pkOrder" v-model="filters.pkOrder" />
					</s-query>

				</div>
				<div class="gk-layout-main" style="height:500px">
					<my-table ref="zttable" :data="pageResult.content" :key="componentKey"
						@selection-change="selectionChange" :loading="loading">
						<el-table-column :label="$t('action.desc')" width="50" fixed="left" header-align="center"
							align="center">
							<template slot-scope="scope"> {{ scope.$index + 1 }} </template>
						</el-table-column>
						<el-table-column type="selection" width="40" :selectable="selectable"></el-table-column>
						<Column width="300" prop="boxCode" label="条码" />

						<Column prop="locId" label="储位" />
						<Column prop="status" label="状态" :formatter="selectionFormat" />
						<Column prop="createTime" label="创建时间" :formatter="dateFormat" />
						<Column prop="changeTime" label="修改时间" :formatter="dateFormat" />
						<Column prop="pkTime" label="最近盘库时间" :formatter="dateFormat" />
						<el-table-column :label="$t('action.operation')" width="120">
							<template slot-scope="scope">
								<kt-button :label="$t('action.showDetail')" perms="core:coreStock:showDetail"
									@click="handleShowDetail(scope.$index, scope.row)" />
							</template>
						</el-table-column>
					</my-table>
				</div>
				<div class="toolbar gk-layout-footer" style="padding:10px;">

					<el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage"
						:current-page="filters.pageNum" :page-size="filters.pageSize" :total="pageResult.totalSize"
						style="float:right;">
					</el-pagination>
				</div>

				<core-stock-view :dialogVisible="stockViewDialogVisible" :dataForm=dataForm
					@stockViewHidden="stockViewHidden">
				</core-stock-view>

			</div>
		</el-dialog>
	</div>
</template>

<script>

import KtButton from "@/views/Core/KtButton"
import { format } from "@/utils/datetime"
import { formatDay } from "@/utils/datetime"
import Column from "@/views/Core/Column"
import MyTable from "@/views/Core/MyTable"
import SQuery from "@/components/Kj/SQuery"
import CoreStockView from "@/dialog/CoreStockView"
import ItemSelect from "@/views/Basic/Material/ItemSelect"
import { dictsFormat, getItemName } from "@/utils/myUtil"
import SDict from "@/components/Kj/SDict"
import XLSX from "xlsx";
export default {
	name: 'CoreStock',
	components: {
		KtButton,
		Column, SQuery,
		MyTable,
		ItemSelect,
		CoreStockView,
		SDict
	},
	props: {
		myParam: Object,
		coreStockDetailViewVisible: {
			type: Boolean
		}

	},
	data() {
		return {
			size: 'small',
			filters: {

				stockStatus: 66, pageNum: 1, pageSize: 20
			},
			loading: false,

			componentKey: 0,
			pageResult: {},
			pageResultDetail: {},
			editDialogVisible: false, // 新增编辑界面是否显示
			stockViewDialogVisible: false,
			editLoading: false,
			classTypes: [],
			// 新增编辑界面数据
			dataForm: {}
		}
	},
	methods: {
		// 获取分页数据
		findPage: function (data) {
			if (data != -1) {
				this.filters.pageNum = data
			}
			this.loading = true;
			this.filters.playType = 2
			this.$api.pk.FindCoreStockPage(this.filters).then((res) => {
				this.pageResult = res.data
				this.$nextTick(() => {
					var contetArray = this.pageResult.content
					for (var i = 0; i < contetArray.length; i++) {
						var d = contetArray[i];
						if (d.pkId == this.myParam.pkId) {
							this.$refs.zttable.$children[0].toggleRowSelection(d, true);
						}
					}
					this.loading = false;
				})
			})
		},
		// 获取明细数据
		findDetailPage: function (data) {
			this.$api.coreStock.GetListByStockId(data).then((res) => {
				this.pageResultDetail = { content: res.data }
			})
		},
		// 显示详情界面
		handleShowDetail: function (params, row) {
			this.dataForm = Object.assign({}, row)
			this.stockViewDialogVisible = true
			this.componentKey += 1;
		},

		stockViewHidden: function () {
			this.stockViewDialogVisible = false; // 新增编辑界面是否显示
		},
		selectable: function (row) {
			return true;
		},

		countFormat: function (row, column, cellValue, index) {
			return cellValue + dictsFormat("units", row.unit)
		},
		selectionChange: function (selections) {
			this.selections = selections
			if (this.loading) {
				return;
			}
			var param = this.myParam.pkId;
			var del = "/0";
			var add = "/0";
			for (var i in this.pageResult.content) {
				var d = this.pageResult.content[i];
				if (d.pkId == this.myParam.pkId) {
					var has = false;
					for (var j in selections) {
						var s = selections[j]
						if (s.id == d.id) {
							has = true;
						}
					}
					if (!has) {
						del += "," + d.id;
					}
				}
			}
			for (var s in selections) {
				add += "," + selections[s].id;

			}
			this.$api.pk.selectStock(param + add + del).then((res) => {
				this.findPage(-1)
			})
		},
		handleChangePos: function (scope, row, direct) {
			row.dir = direct
			this.$api.coreStock.changeDetailPos(row).then((res) => {
				this.findDetailPage(this.dataForm)
			})
		},


		// 时间格式化
		dateFormat: function (row, column, cellValue, index) {
			return format(row[column.property])
		},
		// 时间格式化
		dateFormatDay: function (row, column, cellValue, index) {
			return formatDay(row[column.property])
		},
		itemFilter: function (row, column, cellValue, index) {
			return getItemName(cellValue)
		},

		selectionFormat: function (row, column, cellValue, index) {
			let key = ""
			let propt = column.property;
			if (propt == "status") {
				key = "stockStatus"
			}
			else if (propt == "storeStatus") {
				key = "storeStatus"
			} else if (propt == "locked") {
				key = "isLocked"
			} else if (propt == "wh") {
				key = "wh"
			}

			return dictsFormat(key, cellValue)
		},
		handleClose: function () {
			this.loading = true;
			this.$refs.zttable.$children[0].clearSelection()
			this.$emit('coreStockClose', {})
		},

	},
	mounted() {
		this.findPage(1);

		this.$api.classify.findPage().then((res) => {
			this.classTypes = res.data.content
		})
	}
}
</script>

<style scoped></style>